<template>
    <div class="view-warehouse">
        <div class="top-title">
            <div class="titile-box">
                <!-- <el-button size="mini" @click="backAbove">返回</el-button> -->
                <span
                    class="el-icon-arrow-left icon-left"
                    @click="backAbove"
                ></span>
                <span class="title">{{
                    layer_num == 1
                        ? "仓库概览"
                        : layer_num == 2
                        ? "库存产品详情"
                        : "产品库存"
                }}</span>
                <span v-show="layer_num == 2">({{ catData.cat_name }})</span>
            </div>
            <div class="modify-but" v-show="layer_num == 1">
                <el-button size="mini" type="primary" @click="modifyStock"
                    >修改仓库</el-button
                >
            </div>
        </div>
        <!-- 修改仓库信息 -->
        <modifyStock
            ref="modifyStock"
            :is_config="is_config"
            :ckInfo="ckInfo"
            @updataFun="updataFun"
        ></modifyStock>
        <!-- 修改库存 -->
        <popGdStoreWin
            ref="popGdStoreWin"
            @editQtyNumUpdate="editQtyNumUpdate"
        ></popGdStoreWin>
        <!-- 分类库存详情 -->
        <infoDataList
            ref="infoDataList"
            v-show="layer_num == 1"
            @forward="forward"
            :ckdata_info_list="ckdata_info_list"
            :ckInfo="ckInfo"
        ></infoDataList>
        <!-- 产品库存详情 -->
        <goodDataList
            ref="goodDataList"
            v-show="layer_num == 2"
            :goodlist="goodlist"
            @load="load"
            @openStockFun="openStockFun"
        ></goodDataList>
    </div>
</template>

<script>
import modifyStock from "./modifyStock.vue";
import infoDataList from "./infoDataList.vue";
import goodDataList from "./goodDataList.vue";
import config from "../../js/conf/Config.js";
import popGdStoreWin from "../comm/PopGdStoreWin.vue";

export default {
    name: "warehouseThree",
    components: {
        modifyStock,
        infoDataList,
        goodDataList,
        popGdStoreWin,
    },
    data() {
        return {
            layer_num: 0,
            is_config: false,
            ckInfo: {},
            cklist_data: {},
            ckdata_info_list: [],
            catData: {},
            goodlist: [],
            pfrom: 0,
            is_load: true,
            setgdid: "",
        };
    },
    methods: {
        // 修改库存后更新下列表数据
        editQtyNumUpdate(total, data) {
            this.goodlist.map((v) => {
                if (
                    v.gdid == this.setgdid &&
                    data.storeid == this.cklist_data.id
                ) {
                    v.qty_min = data.qty_min;
                }
            });
        },
        initData(data) {
            this.layer_num = 1;
            this.is_load = false
            this.cklist_data = data;
            this.updataFun();
        },
        updataFun() {
            this.getWarehouseView();
            this.getWarehouseInfo();
        },
        // 获取仓库概述数据
        async getWarehouseView() {
            let url = config.CK_STORE_STORE_VIEW;
            let param = {
                ch: "store",
                storeid: this.cklist_data.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.ckdata_info_list = res.data.list || [];
            }
        },
        // 获取仓库详情数据
        async getWarehouseInfo() {
            let url = config.CK_STORE_INFO;
            let param = {
                ch: "store",
                id: this.cklist_data.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.ckInfo = res.data;
            }
        },
        // 获取仓库分类内的产品列表
        async getGoodList() {
            let url = config.CK_STORE_VIEW_LS;
            let param = {
                pfrom: this.pfrom,
                pnum: 20,
                storeid: this.cklist_data.id,
                catid: this.catData.catid,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.list) {
                this.goodlist = this.goodlist.concat(res.data.list);
                if (this.layer_num < 2) {
                    this.layer_num++;
                }
            } else {
                this.is_load = true;
            }
        },
        // 打开仓库修改弹框
        modifyStock() {
            this.$refs.modifyStock.is_modify_dialog = 2;
            this.$refs.modifyStock.is_dialog = true;
            this.$refs.modifyStock.initData(this.ckInfo);
        },
        //打开库存修改弹框
        openStockFun(item) {
            let data = {};
            data.id = item.gdid;
            data.ch = "store";
            this.setgdid = item.gdid;
            this.$refs.popGdStoreWin.show("show", data);
        },
        // 滚动加载
        load() {
            if (this.is_load) return;
            this.pfrom += 20;
            this.getGoodList();
        },
        // 前进
        forward(item) {
            this.pfrom = 0;
            this.goodlist = [];
            this.catData = item;
            this.getGoodList();
        },
        // 返回
        backAbove() {
            this.layer_num--;
            this.$emit("backAbove", this.layer_num);
        },
    },
};
</script>

<style lang="scss" scoped>
.view-warehouse {
    flex: 1;
    margin-left: 345px;
    height: 100vh;
    background-color: #fff;
    .top-title {
        height: 40px;
        border-bottom: 1px #efefef solid;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        .titile-box {
            span {
                margin-left: 10px;
                font-size: 14px;
            }
            .icon-left {
                font-size: 20px;
                vertical-align: sub;
                margin: 0;
                cursor: pointer;
            }
        }

        .title {
        }
    }
}
</style>